<template>
  <div class="PowerGenerationbox">
    <div class="leftbox">
      <HavucheckTree
        @handClick="handClick"
        @chushihua="chushihua"
      ></HavucheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="7" style="display:flex;margin-top: 4px;">
                  <el-radio-group v-model="radio3" size="small" style="margin-right: 20px">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                  </el-radio-group>
                  <el-date-picker
                    v-if="radio3 == '1'" v-model="value1" type="date" value-format="yyyy-MM-dd"
                    placeholder="选择日期" size="small" style="flex:1;"
                  ></el-date-picker>
                  <el-date-picker
                    v-if="radio3 == '2'" v-model="value2" type="month" value-format="yyyy-MM"
                    placeholder="选择月" size="small" style="flex:1;"
                  ></el-date-picker>
                  <el-date-picker
                    v-if="radio3 == '3'" v-model="value3" type="year" value-format="yyyy"
                    placeholder="选择年" size="small" style="flex:1;"
                  ></el-date-picker>
                </el-col>
                <el-col :span="17" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbutton">
        <div class="titlebox">
          <div>
            <i
              :style="{
                color: isshow ? '#007cee' : '',
                'margin-right': '15px',
              }"
              @click="toimg"
              class="iconfont icon-zhuzhuangtutubiao"
            ></i>
            <i
              :style="{ color: isshows ? '#007cee' : '' }"
              @click="totab"
              class="iconfont icon-biaoge"
            ></i>
          </div>
          <div class="righttitle">
            <TopTile
              @command="command"
              @daochu="daochu"
              @shuaxin="shuaxin"
            ></TopTile>
          </div>
        </div>
        <div class="tabandech">
          <div class="echartbox" v-show="isshow">
            <div class="fadianlv" ref="fadianlv"></div>
            <div class="fuzhaodu" ref="fuzhaodu"></div>
          </div>
          <div class="tablebox" v-show="isshows">
            <el-table
              :data="biaogeshuju"
              :size="issize"
              border
              ref="table"
              :header-cell-style="{
                'text-align': 'center',
                background: '#f5f5f5',
              }"
              v-loading="loading"
              height="calc(100% - 1px)"
              style="width: 100%"
            >
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
                prop="name"
                width="120"
                fixed
                v-if="biaogeshuju.length"
                label="设备"
              >
              </el-table-column>
              <el-table-column
                v-for="(item, index) in tabletimePoints"
                :key="index"
                :prop="item"
                width="150"
                align="right"
                :label="item"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ColorList } from "@/utils/array";
import HavucheckTree from "../component/HavucheckTree.vue";
import TopTile from "@/components/TopTitle/index.vue";
import * as echarts from "echarts";
import { exportexcel } from "@/utils/excel";
import {
  getfadiangonglvapi,
  getfuzhaoduquxianapi,
} from "@/api/Photovoltaic/analysis/PowerGeneration";
export default {
  name: "CallPoliceIndex",
  components: {
    TopTile,
    HavucheckTree,
  },
  data() {
    return {
      loading: false,
      isshow: true,
      isshows: false,
      radio3: "1",
      value1: "",
      value2: "",
      value3: "",
      issize: "medium",
      tableData: [],
      threelist: [],
      biaogeshuju: [],
      tabletimePoints: [],
    };
  },

  mounted() {
    this.gettime();
    this.getfadianlv(true);
    this.getfuzhaodu(true);
  },

  methods: {
    chushihua(val) {
      this.handClick(val);
    },
    handClick(val) {
      this.threelist = val;
      this.gettablelist();
      // this.$nextTick(()=>this.$refs.table.doLayout())
    },
    // 查询
    async gettablelist() {
      if (this.threelist.length) {
        await this.getfadianlv();
        this.getfuzhaodu();
        this.$nextTick(() => this.$refs.table.doLayout());
      } else {
        this.$message.warning("请先选择数据");
        await this.getfadianlv(true);
        this.getfuzhaodu(true);
        this.tabletimePoints = [];
        this.biaogeshuju = [];
      }
    },
    // 处理表格数据
    gettablelis() {
      this.biaogeshuju.forEach((ele) => {
        ele.datalist.map((item, index) => {
          ele[item.timeReading] = item.valueReading;
        });
      });
    },
    // 重置
    chongzhi() {
      this.radio3 = "1";
      this.gettime();
      this.gettablelist();
    },
    toimg() {
      this.isshow = true;
      this.isshows = false;
    },
    totab() {
      this.isshows = true;
      this.isshow = false;
    },
    // 获取发电功率图表
    async getfadianlv(flag) {
      var chartDom = this.$refs.fadianlv;
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        target: chartDom,
      });
      if (!flag) {
        this.loading = true;
        const contrastString = this.threelist.map((ele) => ele.id);
        const {
          data: { list },
        } = await getfadiangonglvapi({
          dateString:
            this.radio3 == "1"
              ? this.value1
              : this.radio3 == "2"
              ? this.value2
              : this.value3,
          dateType: this.radio3,
          contrastString: contrastString.join(","),
        });
        this.biaogeshuju = list;
        this.biaogeshuju.forEach((ele) => {
          ele.datalist.map((item, index) => {
            ele[item.timeReading] = item.valueReading;
          });
        });
        var timePoints = list
          .find((ele) => ele.datalist.length)
          ?.datalist.map((item) => item.timeReading);
        this.tabletimePoints = timePoints;
        this.loading = false;
        var series = list.map((ele, index) => {
          return {
            name: ele.name,
            data: ele.datalist.map((ele) => ele.valueReading),
            type: "line",
            smooth: true,
            // areaStyle: {
            // normal: {
            //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
            // color: new echarts.graphic.LinearGradient(
            //   0, 0, 0, 1,
            // [
            //   { offset: 0,color:ColorList[index],},
            //   { offset: 1, color: '#fff' }
            // ]
            // )
            // }
          };
          // }
        });
      }
      option = {
        // color:['#5087ec','#f2bd42'],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: flag ? [] : timePoints,
        },
        grid: {
          left: "4%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        yAxis: {
          type: "value",
          name: "发电功率(kWh)",
          nameTextStyle: {
            color: "#606266",
            fontSize: 14,
            padding: [0, 40, 10, 0],
          },
        },
        series: flag ? [] : series,
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close();
    },
    // 获取辐射度图表
    async getfuzhaodu(flag) {
      var chartDom = this.$refs.fuzhaodu;
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        target: chartDom,
      });
      if (!flag) {
        const contrastString = [];
        this.threelist.map((ele) => {
          if (ele.parentName) {
            contrastString.push(
              ele.parentName
                ? ele.parentName + "_" + ele.id
                : ele.id + "_" + ele.id
            );
          }
        });
        const {
          data: { list },
        } = await getfuzhaoduquxianapi({
          dateString:
            this.radio3 == "1"
              ? this.value1
              : this.radio3 == "2"
              ? this.value2
              : this.value3,
          dateType: this.radio3,
          contrastString: contrastString.join(","),
        });
        var timePoints = list
          .find((ele) => ele.datalist.length)
          ?.datalist.map((item) => item.timeReading);
        var series = list.map((ele, index) => {
          return {
            name:
              ele.name.slice(-2) == "温度" ? ele.name + "℃" : ele.name + "W/m²",
            data: ele.datalist.map((ele) => ele.valueReading),
            yAxisIndex: ele.name.slice(-2) == "温度" ? 1 : null,
            type: "line",
            smooth: true,
            // areaStyle: {
            // normal: {
            //前四个参数代表位置 左下右上，如下表示从上往下渐变色 暗青色到亮青色，
            // color: new echarts.graphic.LinearGradient(
            //   0, 0, 0, 1,
            // [
            //   { offset: 0,color:ColorList[index],},
            //   { offset: 1, color: '#fff' }
            // ]
            // )
            // }
            // }
          };
        });
      }
      option = {
        color: ["#5087ec", "#f2bd42"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: flag ? [] : timePoints,
        },
        grid: {
          left: "2%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        yAxis: [
          {
            type: "value",
            name: "辐照度(W/m²)",
            nameTextStyle: {
              color: "#606266",
              fontSize: 14,
              padding: [0, -10, 10, 0],
            },
          },
          {
            type: "value",
            name: "温度(℃)",
            nameTextStyle: {
              color: "#606266",
              fontSize: 14,
              padding: [0, 40, 10, 0],
            },
          },
        ],
        series: flag ? [] : series,
      };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close();
    },
    // 导出
    daochu() {
      const contrastString = [];
      this.threelist.map((ele) => contrastString.push(ele.id));
      exportexcel(
        "pes-microservice-biz/pes/power/generation/export",
        {
          dateString:
            this.radio3 == "1"
              ? this.value1
              : this.radio3 == "2"
              ? this.value2
              : this.value3,
          dateType: this.radio3,
          contrastString: contrastString.join(","),
        },
        "发电功率"
      );
    },
    // 刷新
    shuaxin() {
      this.gettablelist();
      this.$message.success("列表刷新成功");
    },
    // 调节表格密度
    command(val) {
      if (val === "默认") {
        this.issize = "medium";
      } else if (val === "中等") {
        this.issize = "small";
      } else {
        this.issize = "mini";
      }
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date();
      const year = date.getFullYear(); // 年
      const mon = date.getMonth() + 1; // 月
      const month = mon < 10 ? "0" + mon : mon;
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //日
      this.$set(this, "value1", year + "-" + month + "-" + day);
      this.$set(this, "value2", year + "-" + month);
      this.$set(this, "value3", year.toString());
    },
  },
};
</script>

<style scoped>
.PowerGenerationbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    margin-right: 10px;
  }
  .rightbox {
    width: calc(100% - 310px);
    height: 100%;
    .righttop {
      height: 80px;
      background-color: #fff;
      padding:  20px;
      margin-bottom: 10px;
    }
    .rightbutton {
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .titlebox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        i {
          margin-right: 15px;
          font-size: 18px;
        }
        i:hover {
          cursor: pointer;
          color: #1890ff;
        }
        .righttitle {
          display: flex;
          align-items: center;
        }
        .text {
          margin: 0 20px;
        }
        .wen {
          cursor: pointer;
          padding-bottom: 2px;
        }
        .wen:hover {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }
      }
      .tabandech {
        height: 95%;
        .echartbox,
        .tablebox {
          height: 100%;
        }
        .echartbox {
          .fadianlv,
          .fuzhaodu {
            height: 50%;
          }
        }
      }
    }
  }
}
</style>
